<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>marry</title>
    <style>
        body,
        div,
        dl,
        dt,
        dd,
        ul,
        ol,
        li,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        pre,
        code,
        form,
        fieldset,
        legend,
        textarea,
        p,
        blockquote,
        th,
        td,
        input,
        select,
        textarea,
        button {
            margin: 0;
            padding: 0
        }
        /* 初始化标签在所有浏览器中的margin、padding值 */
        
        fieldset,
        img {
            border: 0 none
        }
        /* 重置fieldset（表单分组）、图片的边框为0*/
        
        dl,
        ul,
        ol,
        menu,
        li {
            list-style: none
        }
        /* 重置类表前导符号为onne,menu在HTML5中有效 */
        
        blockquote,
        q {
            quotes: none
        }
        /* 重置嵌套引用的引号类型 */
        
        blockquote:before,
        blockquote:after,
        q:before,
        q:after {
            content: '';
            content: none
        }
        /* 重置嵌套引用*/
        
        input,
        select,
        textarea,
        button {
            vertical-align: middle
        }
        /* 重置表单控件垂直居中*/
        
        button {
            border: 0 none;
            background-color: transparent;
            cursor: pointer
        }
        /* 重置表单button按钮效果 */
        
        body {
            background: #fff
        }
        /* 重置body 页面背景为白色 */
        
        body,
        th,
        td,
        input,
        select,
        textarea,
        button {
            font-size: 16px;
            line-height: 1;
            font-family: "微软雅黑", "黑体", "宋体";
            color: #424242;
        }
        /* 重置页面文字属性 */
        
        a {
            color: #424242;
            text-decoration: none;
            -webkit-tap-highlight-color: transparent;
        }
        /* 重置链接a标签 */
        
        a:active,
        a:hover {
            text-decoration: none !important;
        }
        /* 重置链接a标签的鼠标滑动效果 */
        
        address,
        caption,
        cite,
        code,
        dfn,
        em,
        var {
            font-style: normal;
            font-weight: normal
        }
        /* 重置样式标签的样式 */
        
        caption {
            display: none;
        }
        /* 重置表格标题为隐藏 */
        
        table {
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
            table-layout: fixed;
        }
        /* 重置table属性 */
        
        img {
            vertical-align: top
        }
        /* 图片在当前行内的垂直位置 */
        /* 页面设置 */
        /* 取消a标签点击后的虚线框 */
        
        a {
            outline: none;
        }
        
        a:active {
            star: expression(this.onFocus=this.blur());
            text-decoration: none !important;
        }
        /* 设置页面文字等在拖动鼠标选中情况下的背景色与文字颜色 */
        /*
::selection {color: #fff;background-color: #4C6E78;}
::-moz-selection {color: #fff;background-color: #4C6E78;}
*/
        /*清除浮动*/
        
        .clear {
            clear: both;
        }
        
        .clear-float:after {
            display: block;
            content: '';
            clear: both;
        }
        /*清除浮动--推荐使用*/
        
        .clearfix:before,
        .clearfix:after {
            content: '';
            display: table;
        }
        
        .clearfix:after {
            clear: both;
        }
        
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
</body>
<script>
    // 该代码来自http://www.ghugo.com/mobile-h5-fluid-layout-for-iphone6/
    (function(doc, win) {
        // 分辨率Resolution适配
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function() {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                docEl.style.fontSize = 100 * (clientWidth / 720) + 'px';
            };

        // Abort if browser does not support addEventListener
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);

        // 一物理像素在不同屏幕的显示效果不一样。要根据devicePixelRatio来修改meta标签的scale,要注释上面的meta标签
        (function() {
            return;
            var dpr = scale = 1;
            var isIPhone = win.navigator.appVersion.match(/iphone/gi);
            var devicePixelRatio = win.devicePixelRatio;
            if (isIPhone) {
                // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
                if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
                    dpr = 3;
                } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
                    dpr = 2;
                } else {
                    dpr = 1;
                }
            } else {
                // 其他设备下，仍旧使用1倍的方案
                dpr = 1;
            }
            scale = 1 / dpr;

            //
            var metaEl = "";
            metaEl = doc.createElement('meta');
            metaEl.setAttribute('name', 'viewport');
            metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale +
                ', user-scalable=no');
            if (docEl.firstElementChild) {
                docEl.firstElementChild.appendChild(metaEl);
            } else {
                var wrap = doc.createElement('div');
                wrap.appendChild(metaEl);
                doc.write(wrap.innerHTML);
            }
        })();

    })(document, window);
</script>

</html>